<%@ page language="java" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>晓枫的WebSocket</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
</head>

<body>
    <input type="hidden" value="${content}" id="content">
    content : <input type="text" name="content" id="account">
    <button type="submit" onclick="onsubmited()">登陆</button>
    <span id="span"></span>
</body>
</html>

<script type="application/javascript">
    function findAllDepts() {
        var dataMap = {userName : $("#account").val()};
        $.ajax({
            async: false,    //表示请求是否异步处理
            type: "post",    //请求类型
            url: "/index",//请求的 URL地址
            data: dataMap,
            success: function (data) {
                console.log(data);
                $("#content").val(data);
                ws.onopen();
            },
            error: function (data) {
                console.log(data);
            }
        });
    };

    function onsubmited() {
        findAllDepts();  //页面加载完成就执行该方法
    }

    //实时消息
    // function startWebSocket() {
    //     let this_ = this;
    //     let wsUrl = "ws://127.0.0.1:8888";//websocket接口地址
    //     let ws = new WebSocket(wsUrl);
    //     ws.onclose = function () {
    //         this_.reConnect(wsUrl);//重新连接
    //         console.log("连接已关闭 " + new Date());
    //     };
    //     ws.onerror = function () {
    //         this_.reConnect(wsUrl);//重新连接
    //         console.log("连接异常 " + new Date());
    //     };
    //     ws.onopen = function () {
    //         heartCheck.reset().start();//开始心跳检测
    //         console.log("连接成功 " + new Date());
    //     };
    //     ws.onmessage = function (e) {
    //         heartCheck.reset().start();//开始心跳检测
    //         let data = JSON.parse(e.data);
    //         this_.onMessageNotice(data);//获取到数据的回调
    //     };
    //
    //     /*心跳检测：
    //         1.如果当前连接着（onopen或onMessage），就开始心跳检测，即设置定时器一段时间后发送一条数据，发送后再过一段时间关闭连接；
    //           如果在关闭之前，后端正常返回数据（会触发onMessage），会重置心跳检测就一直不会关闭连接。
    //         2.如果当前异常或关闭（onclose,onerror）,就重新建立连接；
    //     */
    //     let heartCheck = {
    //         timeout: 180000,        //3分钟发一次心跳
    //         timeoutObj: null,//定时器：延时发送一次心跳
    //         serverTimeoutObj: null,//定时器：延时检测后端是否返回数据，如返回则还连着，如未返回则后端断了
    //         reset: function () {
    //             clearTimeout(this.timeoutObj);
    //             clearTimeout(this.serverTimeoutObj);
    //             return this;
    //         },
    //         start: function () {
    //             let this_ = this;
    //             this.timeoutObj = setTimeout(function () {
    //                 ws.send("peng");
    //                 console.log("peng");
    //                 this_.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置，说明后端主动断开了
    //                     ws.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
    //                 }, this_.timeout)
    //             }, this.timeout)
    //         }
    //     };
    // }
    //
    // //重新连接websocket
    // function reConnect(url) {
    //     let this_ = this;
    //     if (this.lockReconnect) {
    //         return false;
    //     }
    //     this.setState({
    //         lockReconnect: true//上锁
    //     });
    //     setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
    //         this_.startWebSocket(url);
    //         this_.setState({
    //             lockReconnect: false//开锁
    //         });
    //     }, 5000);
    // }
    //
    // //收到消息的回调
    // function onMessageNotice(data) {
    //     notification.info({//antd 中的组件
    //         message: "这是一条消息",
    //         description: "消息描述",
    //     });
    //     //收到消息重新获取消息列表
    //     this.getNewsList();
    //     //播放声音
    //     this.refs.audio.play();
    // }

</script>
<script type="text/javascript" src="../../static/websocket.js"></script>
<script type="text/javascript" src="../../static/jquery-3.5.1.min.js"></script>
